<template>
  <div class="mains">
    <div class="content">
      <div class="legend">
        <div class="box">
          <div class="square"></div>
          <div class="tips_text">本科室 <span v-if="myDep>0">（{{myDep}}分）</span></div>
        </div>
      </div>
      <div class="legend">
        <div class="box">
          <div class="square other"></div>
          <div class="tips_text ">全院科室</div>
        </div>
      </div>
      <div class="legend">
        <div class="box">
          <div class="square avg"></div>
          <div class="tips_text">全院平均（{{ barData.HospAverage }}分）</div>
        </div>
      </div>
    </div>
    <div :class="className" class="main_chart" ref="charts" :style="{ height: height, width: width }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import resize from './mixins/resize'

export default {
  // mixins: [resize],
  props: {
    datas: { default: () => { } },
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "700px"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  computed: {
    barData() {
      //dissatisfy基本满意 normal不满意数量  satisfaction满意数量
      console.log(this.datas);
      return this.datas
      //return this.$store.state.hcem.threeData
    },
    hasCurrentDep() {
      if (this.barData.deptAverageList && this.barData.deptAverageList.length > 0) {
        let findIndex = this.barData.deptAverageList.findIndex(v => v.isCurrent && v.isCurrent == 1)
        if (findIndex > -1) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    xAxisData() {
      const arr = []
      if (this.barData.deptAverageList && this.barData.deptAverageList.length > 0) {
        this.barData.deptAverageList.map(v => arr.push({ value: v.score, itemStyle: v.isCurrent == 1 ? { color: '#8E30FF' } : { color: '#0F91F7' } }))
      } else {
        arr.push('未知')
      }
      return arr
    },
    xAxisDataLabel() {
      const arr = []
      if (this.barData.deptAverageList && this.barData.deptAverageList.length > 0) {
        this.barData.deptAverageList.map(v => arr.push(v.operateDeptName))
      } else {
        arr.push(0)
      }
      return arr
    },
    avgLine() {
      return this.barData.HospAverage || 0
    },
    myDep() {
      if (this.barData.deptAverageList && this.barData.deptAverageList.length > 0) {
        let arr = this.barData.deptAverageList.findIndex(v => v.isCurrent == 1)
        if (arr > -1) {
          return this.barData.deptAverageList[arr].score.toFixed(1)
        } else {
          return -1
        }
      } else {
        return -1
      }
    }
  },
  watch: {
    barData() {
      this.options()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
    //console.log(this.datas);

  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      // this.chart = echarts.init(this.$el, "macarons");
      this.chart = echarts.init(this.$refs.charts);
      this.options()
    },
    options() {
      this.chart.setOption(
        {
          xAxis: {
            type: 'category',
            data: this.xAxisDataLabel,
            axisTick: {
              show: false // 隐藏x轴刻度线
            },
            // axisLabel: {
            //   show: false // 隐藏x轴刻度标签
            // }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.xAxisData,
              type: 'bar',
              barWidth: '10px',
              showBackground: false,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              },
              markLine: {  // 平均值线
                data: [{
                  type: 'average',
                  name: '平均值'
                }],
                lineStyle: {
                  type: 'dashed', // 设置为虚线
                  color: '#ff9900' // 设置为橙色
                },
                label: {
                  // formatter: `平均值: {c}` // 显示平均值的具体数值
                  formatter: `平均值: ${this.avgLine}`
                }
              }
            }
          ]
        }

      )
    }
  }
};
</script>
<style scoped lang="scss">
.mains {
  width: 100%;
  height: 100%;
  position: relative;

  .content {
    position: absolute;
    left: 80px;
    top: 0;
    display: flex;

    .legend {

      .box {
        display: flex;
        margin-right: 40px;

        .square {
          width: 20px;
          height: 20px;
          background: #8E30FF;
          border-radius: 4px 4px 4px 4px;
        }

        .other {
          background-color: #0F91F7;
        }

        .avg {
          background-color: #FF8F1F;
        }

        .tips_text {
          margin-left: 10px;
          font-family: Microsoft YaHei UI, Microsoft YaHei UI;
          font-weight: 400;
          font-size: 16px;
          color: #000000;
          line-height: 19px;
        }
      }
    }
  }


  .main_chart {
    position: absolute;
    top: 20px;
  }
}
</style>
